<template>
  <div>
    <navs :isDark="true"></navs>
    <div class="cont">
      <div class="flex-st">
        <div class="Data">{{ $t("home.accountInfo") }}</div>
        <img src="../assets/image/home/3.png" class="home2" alt="" />
      </div>

      <div class="RSC">
        <div class="flex-st">
          <img src="../assets/image/other/svg11.png" class="" alt="" />
          <div>{{ nftStakingAmount }}</div>
        </div>
        <div class="text">{{ $t("home.myNftStaked") }}</div>
      </div>
      <div class="RSC">
        <div class="flex-ct end">
          <div>
            <div class="flex-st">
              <img src="../assets/image/other/svg12.png" class="" alt="" />
              <div>{{ nft1Reward }}</div>
            </div>
            <div class="text">{{ $t("home.nft1Earnings") }}</div>
          </div>
          <div class="txbtn" @click="extractXCick(1)">
            {{ $t("home.withdraw") }}
          </div>
        </div>
      </div>
      <div class="RSC">
        <div class="flex-ct end">
          <div>
            <div class="flex-st">
              <img src="../assets/image/other/svg12.png" class="" alt="" />
              <div>{{ nft2Reward }}</div>
            </div>
            <div class="text" @click="extractXCick(2)">
              {{ $t("home.nft2Dividends") }}
            </div>
          </div>
          <div class="txbtn">
            {{ $t("home.withdraw") }}
          </div>
        </div>
      </div>
      <div class="RSC">
        <div class="flex-ct end">
          <div>
            <div class="flex-st">
              <img src="../assets/image/other/svg12.png" class="" alt="" />
              <div>{{ nft3Reward }}</div>
            </div>
            <div class="text" @click="extractXCick(3)">
              {{ $t("home.nft3Dividends") }}
            </div>
          </div>
          <div class="txbtn">
            {{ $t("home.withdraw") }}
          </div>
        </div>
      </div>
      <!-- <div class="RSC">
        <div class="flex-ct end">
          <div>
            <div class="flex-st">
              <img src="../assets/image/other/svg12.png" class="" alt="" />
              <div>54875</div>
            </div>
            <div class="text">{{ $t("home.myDailyOutput") }}</div>
          </div>
          <div class="txbtn" @click="navigateTo('/withdrawal')">
            {{ $t("home.view") }}
          </div>
        </div>
      </div> -->

      <div class="RSC">
        <div class="flex-ct end">
          <div>
            <div class="flex-st">
              <img src="../assets/image/other/svg13.png" class="" alt="" />
              <div>{{ teamReward }}</div>
            </div>
            <div class="text">{{ $t("home.myDynamicEarnings") }}</div>
          </div>
          <div class="txbtn" @click="navigateTo('/list')">
            {{ $t("home.view") }}
          </div>
        </div>
      </div>

      <div class="RSC">
        <div>
          <div class="text">{{ $t("home.myInviteCode") }}</div>
          <div class="text interurl">{{ interurl }}</div>
        </div>
        <div class="flex-en">
          <div
            class="txbtn"
            v-clipboard:copy="interurl"
            v-clipboard:success="_onCopy"
          >
            {{ $t("home.copy") }}
          </div>
        </div>
      </div>

      <div class="RSC">
        <div class="flex-st">
          <img src="../assets/image/other/svg14.png" class="" alt="" />
          <div>{{ teamRewardRate }}%</div>
        </div>
        <div class="text">{{ $t("home.myTeamRewardRate") }}</div>
      </div>
    </div>

    <foot></foot>
  </div>
</template>

<script>
import navs from "../components/nav.vue";
import foot from "./components/foot.vue";
import { Toast } from "vant";
import { AIMEMainContract, web3 } from "@/assets/js/web3";
export default {
  components: {
    navs,
    foot,
  },
  // computed: {
  //   currentAccount() {
  //     return sessionStorage.getItem("account") || "";
  //   },
  // },
  data() {
    return {
      risBalance: "0",
      aimeBalance: "0",
      nftBalance: 0,
      needRis: "0",
      needAime: "0",
      needUsdt: "0",
      nft2Reward: "0",
      nft1Reward: "0",
      nft3Reward: "0",
      interurl: "", // 邀请链接
      // dailyMint: "0",
      nftStakingAmount: "0",
      teamReward: "0",
      teamRewardRate: "0",
      leaderAddress: "",
      currentAccount: "",
    };
  },
  mounted() {
    this.currentAccount = sessionStorage.getItem("account") || "";
    this.leaderAddress = sessionStorage.getItem("leaderAddress") || "";
    this.loadMergeData();
    this.initInviteUrl();
    this.getAccountData();
  },
  methods: {
    navigateTo(route) {
      this.$router.push({ path: route });
    },
    //提取
    async extractXCick(index) {
      // 4.claimNft1Rewards()：领取用户所有NFT1收益。
      // 5.claimNft2Rewards()：领取用户所有NFT2收益。
      // 6.claimNft3Rewards()：领取用户所有NFT3收益。
      if (!this.currentAccount) return;
      try {
        if (index == 1) {
          this.loading = true;
          let res = await AIMEMainContract.methods
            .claimNft1Rewards()
            .send({ from: this.currentAccount });
          if (res) {
            Toast(this.$t("nft.withdrawSuccess"));
          }
          this.loading = false;
        }
        if (index == 2) {
          this.loading = true;
          let res = await AIMEMainContract.methods
            .claimNft2Rewards()
            .send({ from: this.currentAccount });
          if (res) {
            Toast(this.$t("nft.withdrawSuccess"));
          }
          this.loading = false;
        }
        if (index == 3) {
          this.loading = true;
          let res = await AIMEMainContract.methods
            .claimNft3Rewards()
            .send({ from: this.currentAccount });
          if (res) {
            Toast(this.$t("nft.withdrawSuccess"));
          }
          this.loading = false;
        }
      } catch (error) {}
    },
    //6.queryUserAccountData(address add)：查询账户信息页面数据。返回值：nftStakingAmount-我的NFT质押数量，teamReward-我的动态收益，teamRewardRate-我的团队奖励比例。
    async getAccountData() {
      if (!this.currentAccount) return;
      try {
        const res = await AIMEMainContract.methods
          .queryUserAccountData(this.currentAccount)
          .call();
        this.nftStakingAmount = Number(res.nftStakingAmount).toFixed(2);
        this.teamReward = Number(
          web3.utils.fromWei(res.teamReward, "ether")
        ).toFixed(2);
        this.teamRewardRate = Number(res.teamRewardRate).toFixed(2);

        this.nft1Reward = Number(
          web3.utils.fromWei(res.nft1Reward, "ether")
        ).toFixed(2);
        this.nft2Reward = Number(
          web3.utils.fromWei(res.nft2Reward, "ether")
        ).toFixed(2);
        this.nft3Reward = Number(
          web3.utils.fromWei(res.nft3Reward, "ether")
        ).toFixed(2);
      } catch (e) {
        console.error("合约调用失败", e);
      }
    },
    async loadMergeData() {
      if (!this.currentAccount) return;
      try {
        const res = await AIMEMainContract.methods
          .getMergeData(this.currentAccount)
          .call();
        this.risBalance = Number(
          web3.utils.fromWei(res.risBalance, "ether")
        ).toFixed(2);
        this.aimeBalance = Number(
          web3.utils.fromWei(res.aimeBalance, "ether")
        ).toFixed(2);
        this.nftBalance = res.nftBalance;
        this.needRis = Number(web3.utils.fromWei(res.needRis, "ether")).toFixed(
          2
        );
        this.needAime = Number(
          web3.utils.fromWei(res.needAime, "ether")
        ).toFixed(2);
        this.needUsdt = Number(
          web3.utils.fromWei(res.needUsdt, "ether")
        ).toFixed(2);
      } catch (e) {
        console.error("合约调用失败", e);
      }
    },

    initInviteUrl() {
      if (!this.currentAccount) return;
      this.interurl = `https://aimecoin.cc/#/?ref=${this.currentAccount}%`;
    },
    navigateTo(route) {
      this.$router.push({ path: route });
    },
    _onCopy() {
      Toast(this.$t("home.copy"));
    },
  },
};
</script>
<style lang="less" scoped>
.cont {
  padding: 0 36px;
  background: #121212;
  font-weight: 400;
  font-size: 28px;
  color: #a1a1a1;
  word-break: break-all;
  .flex-st {
    font-size: 48px;
    color: #ededed;
    .Data {
      font-weight: 400;
      font-size: 48px;
      color: #ededed;
      flex: 0 0 230px;
    }
  }
  .home2 {
    width: 100%;
    // margin: 128px 0;
    margin-left: -100px;
  }
}

.RSC {
  flex: 1;
  padding: 28px 34px;
  border-radius: 16px 16px 16px 16px;
  border: 2px solid #212121;
  font-weight: 500;
  font-size: 40px;
  color: #ededed;
  margin: 16px 5px 0;

  img {
    width: 80px;
    height: 80px;
    margin-right: 30px;
  }
  .text {
    font-size: 28px;
    color: #a1a1a1;
    margin-top: 16px;
  }
}
.lev {
  margin: 44px 0;
  border-radius: 16px 16px 16px 16px;
  border: 2px solid #212121;
  padding: 24px 40px;
  font-size: 28px;
  color: #a1a1a1;
  .v1 {
    font-family: Notable, Notable;
    font-weight: 400;
    font-size: 40px;
    color: #ededed;
    margin-bottom: 22px;
  }
  img {
    width: 144px;
    height: 144px;
  }
}
.helistbox {
  padding: 0 0 64px;
  .title {
    font-weight: 400;
    font-size: 48px;
    color: #ededed;
    margin-bottom: 64px;
  }
  .helistlist {
    border-radius: 16px 16px 16px 16px;
    border: 2px solid #212121;
    padding: 50px 0;
  }
  .flex-cc {
    text-align: center;
    > div {
      flex: 1;
      margin-bottom: 28px;
    }
    .num {
      color: #bdee63;
    }
  }
}
.end {
  align-items: flex-end;
}
.txbtn {
  background: #bdee63;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  font-weight: 500;
  font-size: 28px;
  color: #121113;
  padding: 10px 52px;
  text-align: center;
  margin-top: 10px;
  display: inline-block;
}
</style>
